/*
 * @Author: cygao
 * @Date: 2018-11-09 13:58:25
 * @Last Modified by: cygao
 * @Last Modified time: 2018-11-20 19:02:30
 */

import React, { Component } from 'react';
import { connect } from "react-redux";
import * as actions from '../../../store/action/community';
import './funDetail.less'
import Fun from './fun/fun'
import Comment from './comment/comment'


class FunDetail extends Component{
  constructor(){
    super();
    this.state = {
      list: [{
        first_comment: {
          id: 1, 
          content: "这是一条趣事测试这是一条趣事测试这是一条趣事测试这是一条趣事测试这是一条趣事测试", 
          created_at: "19小时前",
          floor_num: 1,
          id: 1,
          images: [], 
          like_count: 0, 
          reply_count: 0, 
          user: {
            avatar: "http://veykoo.com:7777/img/avatar.png",
            id: 12,
            name: "",
            nickname: "18792865370",
            scores: 10
          }
        },
        id: 1,
        type: 2
      }],
      value: ''
    }
  }
  componentWillMount(){
     //判断是否登陆
     this.isLogin();
    this.props.getTopicDetail(this.props.location.pathname.split('/')[2]);
  }
  back = () =>{
    this.props.history.go(-1);
  }

    //退出登陆
    logout = () =>{
      localStorage.setItem('token', '');
      //判断是否登陆
      this.isLogin();
  }
  //判断是否登陆
  isLogin = () => {
      if(!localStorage.getItem('token')){
          this.props.history.push('/glogin')
      }
  }

  onInput(event){
    this.setState ({
      value: event.target.value
    })
  }
  postComment(){
    if(this.state.value == ''){
      alert('请输入评论');
      return;
    }
    this.props.submitComment({
      tid: this.props.location.pathname.split('/')[2],
      content: this.state.value
    })
    this.setState({
      content : ''
    })
    this.fetchFunList();
  }


  fetchFunList = () =>{
    setTimeout(()=>{
      this.props.getTopicDetail(this.props.location.pathname.split('/')[2]);
    },500)
  }
  render() {
    return (
      <div id="fun-detail">
        <div className="header">
          <i className="btn-back" onClick={this.back}></i>
          <p className="title">趣事分享</p>
        </div>
        <Fun list={ this.props.community.detail.data[0] } fetchFunList={this.fetchFunList} type="detail"/>
        <div className="list-comment">
          <p className="comment-title">全部评论</p>
          <Comment comments={ this.props.community.detail.data.slice(1).reverse() } fetchFunList={this.fetchFunList}/>
          <div className="height100"></div>
        </div>
        <div className="input-comment">
          <input type="text" placeholder="回复楼主" value={this.state.value} onChange={this.onInput.bind(this)}/>
          <button className="commit" onClick={this.postComment.bind(this)}>发表</button>
        </div>
      </div>
    )
  }
}

export default connect((state)=>{return {...state}}, actions)(FunDetail);